<template>
    <div id="register">
        <div class="header">
            <mt-header fiexd title="车神注册"></mt-header>
        </div>

        <div class="content">
            <div class="userImg">
                <img v-if="headerImg" :src="headerImg">
                <img v-else src="../lib/img/tou.jpg">
            </div>

            <mt-field label="用户名" required placeholder="请输入用户名" v-model="username"></mt-field>
            <mt-field label="密码" required placeholder="请输入密码" type="password" v-model="paw"></mt-field>
            <mt-field label="邮箱" required placeholder="请输入邮箱" type="email" v-model="email"></mt-field>
        </div>

        <div class="register-header-select">
            <mt-button type="danger" size="large">选择头像</mt-button>
            <input type="file" class="register-select-img" @change="selectImg"/>
        </div>

        <div class="register-btn">
            <mt-button type="primary" size="large" @click="registerHandle">注册</mt-button>
        </div>

         <div class="register-tab">
            <a class="register-to-login" @click="toLogin">已有账号 ? 前往登陆</a>
        </div>
       
    </div>
</template>
<script>
import axios from 'axios'

import {mapMutations} from 'vuex'

export default {
     data(){
        return {
            username: '',
            paw: '',
            email: '',
            headerImg: ''
        }
    },
    methods:{

        ...mapMutations([
            "setState",
            "toastInfo"
        ]),

            //获取头像
        selectImg(ev){
            //选择的图片 在ev拿取
            const fileImg = ev.target.files
            const fileReader = new FileReader()

            fileReader.readAsDataURL(fileImg[0])

            fileReader.onloadend = (ev) =>{
                //此时 结果拿取 在ev里面拿 此时 this是Vue
                const imgBase = ev.target.result
                this.headerImg = imgBase
                
            }
        },
            //发送注册请求
        registerHandle(){
            let { username, paw, email, headerImg} = this._data
            //验证 邮箱格式
            const regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")
            if(!username){
                this.toastInfo('用户名为空')
                return
            }else if(!paw){
                this.toastInfo('密码为空')
                return
            }else if(!email){
                this.tastInfo('邮箱为空')
                return
            }else if(!regEmail.test(email)){
                this.toastInfo('您的邮箱格式错误')
                return
            }else if(!headerImg){
                this.toastInfo('请选择您的头像')
                return
            }

            axios({
                method: 'post',
                url: 'http://localhost:3003/register',
                responseType: 'json',
                data:{
                    username,
                    paw,
                    email,
                    headerImg
                }
            })
            .then((res) =>{
                const msg = res.data.msg
                this.toastInfo(msg)
            })
        },
        //前往登陆
        toLogin(){
            this.setState({count: 'login'})
        }
    }
}
</script>
<style lang="less" scoped>
#register{

    .register-header{
       margin: 10% 0 20px 25%;
       width: 50%;
       border-radius: 50%;
    }

        .register-tab{
        margin: 20px 0;
        text-align: center;
        a{
            font-size: 20px;
            padding: 0 15px;
            color: #26A2FF;
        }
        span{
            color: #BDBDBD;
        }
    }

    .register-header-select{
       position: relative;
       margin-top: 10px;
       .register-select-img{
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           opacity: 0;
       }
    }

    .register-btn{
        margin-top: 10px;
    }
}
</style>

